<html>

<head>
  <title>离线瓦片地图</title>
  <link rel="stylesheet" type="text/css" href="./ol.css">
  <script type="text/javascript" src="./ol.js" charset="utf-8"></script>
</head>

<body>
  <div id="map" style="width:100%;"></div>

  <script type="text/javascript">

    // 地图设置中心，设置到成都，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
     var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
    //var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
    //创建地图
    var map = new ol.Map({
      view: new ol.View({
         center: center,
        projection:'EPSG:3857',
        zoom: 7,
        maxZoom: 14,
        minZoom: 4
      }),
      target: 'map'
    });
  
    function zeroFill(num, len, radix) {
      var str = num.toString(radix || 10);
      while (str.length < len) {
        str = "0" + str;
      }
      return str;
    }
    // 添加一个使用离线瓦片地图的层
    // var offlineMapLayer = new ol.layer.Tile({
    //   // source: new ol.source.XYZ({
    //   //   // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
    //   //   url: 'offlineMapTiles/{z}/{x}/{y}.png'
    //   // })
    //   source: new ol.source.XYZ({
    //     tileUrlFunction: function (coordinate) {
    //       var x = 'C' + zeroFill(coordinate[1], 8, 16);
    //       var y = 'R' + zeroFill(coordinate[2] , 8, 16);
    //       var z = 'L' + zeroFill(coordinate[0], 2, 10);
    //       // console.log(x)
    //       // console.log(y)
    //       // console.log(z)
    //       return 'http://localhost:8080/GisMap/_alllayers/' + z + '/' + y + '/' + x + '.png';
    //     },
    //     prijection: 'EPSG:3857'
    //   })
    // });
    var offlineMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://localhost:8080/gis/{z}/{x}/{y}.png'
        // url: 'http://localhost:8080/GoogleDX/{z}/{x}/{y}.png'
      })
    });
    map.addLayer(offlineMapLayer);
  </script>

</body>

</html>